<template>
            <header class="header-title">
            <div class="header-title-left">
                <span class="city"><i><router-link to="/location">{{$store.state.cityName}}</router-link></i><img src="@/assets/imgs/down-arrow.png" /></span>
            </div>
            <div class="header-title-center">电影</div>
            <div class="header-title-right"></div>
        </header>

</template>

<style lang="scss" scoped>
.header-title{
    // position: fixed;
    top:0;
    width:100%;
    height: 0.98rem;
    line-height: 0.98rem;
    z-index: 9000;
    background-color: #fff;
    display: flex;
    padding:0 0.3rem;
    box-sizing: border-box;
}
.header-title-left{
    width:18%;
    flex:none;
}
.city{
    font-size:0.26rem;
    a{
        color:black;
    }
}
.city img{
    width: .12rem;
    height: .06rem;
    margin-left:.06rem;   
}
.header-title-center{
    flex:1;
    font-size:0.34rem;
    text-align: center;
}
.header-title-right{
    width:18%;
    flex:none;
    font-size:0.26rem;
}
.header-title:after{
    display: block;
    content: " ";
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    height: 1px;
    border-bottom: 1px solid #ededed;
    color: #ededed;
    -webkit-transform-origin: 0 100%;
    -ms-transform-origin: 0 100%;
    transform-origin: 0 100%;
    -webkit-transform: scaleY(.5);
    -ms-transform: scaleY(.5);
    transform: scaleY(.5);
}

</style>